<template>
    <div class="overall">
        <el-card class="user_address">
            <div class="address_title">
                <h2>收货人信息</h2>
            </div>
            <div class="recipient_field">
                <div v-for="(item,index) in recipients" :class="choosenum==index? 'recipient-item-chosen':'recipient-item'" @click="onclick(index)">
                    <p>收货人:{{item.name}}</p>
                    <p>收货地址:{{item.address}}</p>
                    <p>联系方式:{{item.telephone}}</p>
                </div>
                <div class="recipient-item" @click="addRecipient">
                    <i class="el-icon-circle-plus"></i>
                </div>
            </div>
        </el-card>

        <el-card class="good_inventory">
            <div class="inventory_title">
                <h2>购物清单</h2>
            </div>
            <el-table :data="detail" style="width: 100%">
                <el-table-column prop="name" label="商品名称" width="200">
                </el-table-column>
                <el-table-column prop="leasePeriodDays" label="租赁周期（天）" width="200">
                </el-table-column>
                <el-table-column prop="pricePerPeriod" label="每期价格（元）" width="200">
                </el-table-column>
                <el-table-column prop="totalPrice" label="商品总价（元）" width="200">
                </el-table-column>
                <el-table-column prop="" label="租期数" width="200">
                    <template slot-scope="scope">
                        <el-input-number v-model="num" @change="handleChange" :min="1" :max="scope.upperLimit" label="描述文字" size="small"></el-input-number>
                    </template>
                </el-table-column>
            </el-table>
            <button class="main-btn" @click="creatOrder">付款</button>
            <div class="pay_field">
                <h2> 需支付:</h2>
                <h3 class="good-price">￥{{total}}</h3>
            </div>
            <div class="deposit_field">
                <h2 >押金:</h2>
                <h3 class="good-price">￥{{deposit}}</h3>
            </div>
        </el-card>
        <el-dialog :visible.sync="recipientDialogVisible" width="50%" :close-on-click-modal="false" title="新增收货信息" @close="recipientDialogClosed">
            <el-form :model="recipientForm" :rules="recipientFormRules" ref="recipientFormRef" label-width="100px">
                <el-form-item label="收货人" prop="name" >
                    <el-input v-model="recipientForm.name" ></el-input>
                </el-form-item>
                <el-form-item label="省市区/县" prop="address1" >
                    <el-cascader v-model="address1"  :options="cityData"  clearable >
                    </el-cascader>
                </el-form-item>
                 <el-form-item label="详细地址" prop="address2">
                    <el-input v-model="address2" ></el-input>
                </el-form-item> 
                <el-form-item label="联系电话" prop="telephone" >
                    <el-input v-model="recipientForm.telephone" ></el-input>
                </el-form-item> 
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button  @click="setRoleDialogVisible=false">取 消</el-button>
                <el-button type="primary" @click="uploadRecipient">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="付款码" width="50%" :visible.sync="qrCodetDialogVisible">
            <img src='../../../assets/img/qrcode.png' class="qrcode">
        </el-dialog>
    </div>
</template>

<script>
import cityData from './citydata.js';
export default {

    data(){
        return{
            cityData,
            detail:[],
            recipients:[],
            goodId:'',
            num:1,
            total:'',
            deposit:'',
            address1:'',
            address2:'',
            choosenum:'',
            recipientDialogVisible:false,
            qrCodetDialogVisible:false,
            recipientForm:{
                name:'',
                address:'',
                telephone:'',
                userId:'1'
            },
            addForm:{
                rentalGoodsId:'',
                recipientId:'',
                periodNumber:''
            },
            recipientFormRules:{
                name:[{required:true,message:'请填写收货人姓名',trigger:'blur'}],
                address1:[{required:true,message:'请选择省市区/县',trigger:'blur'}],
                address2:[{required:true,message:'请填写详细地址',trigger:'blur'}],
                telephone:[{required:true,message:'请填写联系方式',trigger:'blur'}],
            },
        }
    },
    methods:{
         async getDetail(id){
            const {data:res}=await this.$http.get('rent/rentalGoods/findByID/'+id)
            this.detail.push(res.data); 
            this.deposit=Math.ceil(2*res.data.pricePerPeriod);
            this.total=this.deposit*1.5;
            this.addForm.periodNumber=this.num;
            this.addForm.rentalGoodsId=id;
            console.log(this.detail)  
        },
        async getRecipient()
        {
            const {data:res}=await this.$http.get('rent/recipient/findByUseId/1');
            this.recipients=res.data;
            console.log(res)
        },
        handleChange(){
            this.total=this.deposit+this.num*this.detail[0].pricePerPeriod;
        },
        addRecipient()
        {
            this.recipientDialogVisible=true;
        },
        recipientDialogClosed()
        {
            this.$refs.recipientFormRef.resetFields();
        },
        async uploadRecipient()
        {
            this.recipientForm.address=this.address1+this.address2;
            const {data:res}=await this.$http.post('rent/recipient/add',this.recipientForm);
            console.log(res);
            this.recipientDialogVisible=false;
        },
        onclick(index)
        {
            this.addForm.recipientId=this.recipients[index].strId;
            this.choosenum=index;
        },
        creatOrder()
        {
            var that=this;
            this.$confirm('是否确认下单?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(async () => {
                const {data:res}=await that.$http.post('rent/RentalOrder/add',that.addForm)
                if(res.code==200)
                {
                this.$message.success("下单成功!")
                this.qrCodetDialogVisible=true; 
                }
                
                }).catch(() => {  
                      
                });
            
        }
    },
    created(){
        this.goodId=this.$route.query.Id;
        this.getDetail(this.goodId);        
        this.getRecipient();
        console.log(this.deposit)
    }
}
</script>

<style lang="less" scoped>
/deep/.el-card__body
{
    padding:0;
}
h2
 {
     font-size: 18px;
     font-weight: 400;
    color: #626262;
     display: inline-block;
}
.main-btn
{
    width: 145px;
    height: 50px;
    float:right;
    line-height: 28px;
    vertical-align: middle;
    background-image: linear-gradient(180deg, #678ee7, #5078df);
    border: 1px solid #5c81e3;
    border-radius: 4px;
    margin-right:10px;
    font-size: 16px;
    color:#fff;
    cursor: pointer;
    margin-top:5px;
    &:hover {
      background-image: linear-gradient(180deg, #6c8cd4, #4769c2);
    }
}
.good-price {
      margin: 15px 0;
      height: 30px;
      text-align: center;
      line-height: 25px;
      color: #d44d44;
      font-family: Arial;
      font-size: 18px;
      font-weight: 700;
}
.good_inventory,.user_address
{
    width:1200px;
    margin-bottom: 30px;
    margin-left:auto;
    margin-right: auto;;
    overflow: hidden;
    background: #fff;
    padding:0;
    border-radius: 8px;
    border: 1px solid #dcdcdc;
    border-color: rgba(0,0,0,.14);
    box-shadow: 0 3px 8px -6px rgb(0 0 0 / 10%);
    .inventory_title,.address_title
    {
    padding-left: 30px;
    position: relative;
    z-index: 10;
    height: 60px;
    padding: 0 10px 0 24px;
    border-bottom: 1px solid #d4d4d4;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 1px 7px rgb(0 0 0 / 6%);
    background: #f3f3f3;
    background: linear-gradient(#fbfbfb,#ececec);
    line-height: 60px;
    font-size: 18px;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    }
}
.pay_field
{
    float:right;
    display: flex;
    margin-right:100px;
}
.deposit_field
{
 float: right;  
 margin-right:100px;
 display: flex;
}
.recipient_field
{
    display: flex;
    padding: 30px 13px 0;
    .recipient-item,.recipient-item-chosen
    {
        overflow: hidden;
        float: left;
        width: 275px;
        height: 160px;
        margin: 0 0 30px 16px;
        border: 1px solid #e5e5e5;
        border-radius: 3px;
        line-height: 14px;
        text-align: left;
        word-wrap: break-word;
        word-break: normal;
        color: #626262;
        cursor: pointer;
        padding: 19px 14px 0 19px;
        font-size:14px;
        line-height: 26px;
        &:hover{
            border: 1px solid #4769c2;
        }

    }
    .recipient-item-chosen
    {
        border: 1px solid #4769c2;
    }
    i
    {
        font-size:50px;
        margin-top:40px;
        margin-left:110px;
        display: inline-block;
    }
}
.qrcode
{
    width:400px;
    height:400px;
    margin-left:150px;
}
</style>